<!DOCTYPE html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="main">
	<!-- <div v-bind:name="user.name">姓名: {{ user.name }}</div>
	<div :name="user.age">年龄: {{ user.age }}</div>
	<div :[attr]="user.sex">性别: {{ user.sex }}</div>
	<input type="text" v-model="user.name">
	<button v-if="user.name" @click="alert('保存成功')">保存</button>
	<div v-else>请输入用户名</div> -->
	
	
	
	<!-- <div v-show="!user.name">
		请输入用户名
	</div> -->
	
	
	<!-- <div class="order">
		<div class="item" v-for="(i, index) in orderList">
			<div>序号:{{ index }}</div>
			<div>订单号: {{ i.order_sn }}</div>
			<div>订单金额: {{ i.value }}</div>
		</div>
	</div> -->
	
	<!-- 用户注册 -->
	<div>
		<div>
			<label for="">用户名</label>
			<input type="text" v-model="regData.username">
		</div>
		<div>
			<label for="">密码</label>
			<input type="password" v-model="regData.password">
		</div>
		<div>
			<label for="">性别</label>
			<input type="text" v-model="regData.sex">
		</div>
		<div>
			<label for="">年龄</label>
			<input type="text" v-model="regData.age">
		</div>
		<div>
			<label for="">出生年月</label>
			<input type="date" v-model="regData.ymd">
		</div>
		<button @click="save()">保存</button>
	</div>
</div>

<!-- <div id="main">
	<input type="text" v-model="value">
	{{ htmlContent }}
	<div><span>我是一个html内容</span></div>
	<div v-html="htmlContent"></div>
	<div>
		这是用户输入的内容
		<div v-html="value"></div>
	</div>
</div>
 -->


<script>

var vm = new Vue({
	el: '#main',
	// 数据
	data: {
		text: 'hello vue',
		user: {
			name: '张三',
			age: '30',
			sex: '男',
		},
		htmlContent: '<div><span>我是一个html内容</span></div>',
		value: '',
		attr: 'href',
		showSubmit: true,
		
		orderList: [
			{
				order_sn: 1,
				value: 1,
			},
			{
				order_sn: 2,
				value: 1,
			},
			{
				order_sn: 3,
				value: 1,
			},
			{
				order_sn: 4,
				value: 1,
			},
		],
		regData: {
		},
	},
	methods: {
		alert: function() {
			console.log('保存成功')
		},
		changeUserName: function() {
			console.log('内容被该改变了')
		},
		jiaoyan: () => {
			console.log('校验用户信息')
		},
		save: function() {
			this.jiaoyan()
			console.log('用户信息', this.regData)
		}
	}
});

// Vue 
// 文档 
// 官网 https://cn.vuejs.org/v2/guide/instance.html
// 菜鸟 https://www.runoob.com/vue2/vue-tutorial.html
// 模板语法
// 文本插值 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
// 原始 HTML 双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

// 指令
// 常用指令: v-html,v-bind(缩写:),v-on(缩写@),v-if,v-else-if,v-else,v-show,v-for,v-model
// v-html的常用场景: 文章富文本内容的显示
// 绝不要对用户提供的内容使用插值
// 设置标签的属性需要用v-bind指令如v-bind:id, 简写, 可以直接使用:id的方式设置标签的属性
// v-on指令用于监听DOM事件, 如监听onclick事件可以写成v-on:click,缩写为@click
// v-if 条件判断指令, 当if的条件为真,指令所在的标签块显示,否则隐藏
// v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
// v-show 也是条件判断指令, 当v-show的条件为真,指令所在的标签块显示,否则隐藏
// v-show与v-if的区别, v-show是通过控制标签的样式来实现标签的显示和隐藏, 而v-if则是通过渲染标签和取消渲染来实现标签的显示和隐藏

// 我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

// v-model 用于在表单元素上进行双向数据绑定

// 课堂练习
// 1 创建一个表单,包含以下字段: 用户名,密码,验证码, 用vue实现双向数据绑定,用户的输入值记录在user对象内
// 2 添加一个保存按钮, 当所有用户数据都输入的时候, 按钮可以点击, 否则提示请输入XXX字段
// 3 点击保存按钮将用户名,密码,以文本形式显示在网页上
// 4 用jq实现相同的功能
// 5 用js实现相同的功能
</script>